import React, { Key, useEffect, useState } from 'react'
//路由引入
import { useNavigate } from 'react-router-dom';

//组件引入
import { Button, Form, Input, Table, Card, message, Tooltip } from 'antd'
//图标引入
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

//引入api请求的方法
import {
  getHosSetListRequest,
  deleteHosListRequest,
  batchRemoveHosListRequest
} from '@/api/hospital/hospitalSet';

//引入hosSetList的类型，用于定义状态
import type {
  getHosSteListRecordsType,
  getHosSetListItemType
} from '@/api/hospital/model/hospitalSetTypes';
//引入hosSetTypes的类型
import type { searchHosFinishParamsType } from './types'

//引入css文件，通过对象访问的方式引用
import style from './index.module.css'

//医院设置组件
export default function HospitalSet() {
  //使用编程式路由导航hook
  const navigate = useNavigate()

  //表格设置列表数据
  const [hosSetList, setHosSetList] = useState<getHosSteListRecordsType>([])
  //表格列表当前页码，类型根据我们传入的类型已推断出来
  const [current, setCurrent] = useState(1)
  //表格数据的总数，初始化为0
  const [total, setTotal] = useState(0)
  //表格列表每页的个数
  const [pageSize, setPageSize] = useState(3)
  //表格数据的加载状态
  const [isLoading, setIsLoading] = useState(false)
  //表单事件的状态
  const [fieldValue, setFieldValue] = useState<searchHosFinishParamsType>({})
  //创建一个渲染数据的状态
  const [reRender, setReRender] = useState(true)
  //创建一个监听多选框的状态，用于改变批量删除的按钮
  const [isSelector, setIsSelector] = useState(true)
  const [batchIds, setBatchIds] = useState<Key[]>([])

  //当组件加载的时候，开始请求分页列表的数据
  //注意，异步函数不能作为useEffect的参数，因为useEffect可能会书写return一个函数，起到清理的作用，如果是异步函数，则return的函数就变成异步的了
  useEffect(() => {
    //数据渲染完成前将loading的状态改为true
    setIsLoading(true)
    //封装一个请求函数，将异步函数包裹起来后续调用
    const getHosSetList = async () => {
      //请求必填参数page与limit，选填hosname，hoscode
      const result = await getHosSetListRequest({
        page: current,
        limit: pageSize,
        ...fieldValue
      })
      //表格设置列表渲染
      setHosSetList(result.records)
      //表格数据的总数渲染
      setTotal(result.total)
      //数据渲染完成后将loading的状态改为false
      setIsLoading(false)
    }
    //调用请求函数
    getHosSetList()
  }, [current, pageSize, fieldValue, reRender])
  //columns是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      //设置表格row的宽度
      width: 50,
      //render函数的第三个参数是下标
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'handle',
      //设置小按钮 右边固定
      fixed: 'right' as 'right',
      width: 120,
      //render的第二个参数是数据本身
      render(_: any, data: getHosSetListItemType) {
        //从数据解构拿到id，设置到路由参数里，以id来设置表格的rowKey
        const { id } = data
        return (
          <div className={style.minButtons} >
            {/* 更新按钮 */}
            <Tooltip title='更新数据'>
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={() => { navigate(`/syt/hospital/updatehosset/${id}`) }}
              />
            </Tooltip>
            {/* 删除按钮 */}
            <Tooltip title='删除数据'>
              <Button
                type="primary"
                danger
                icon={<DeleteOutlined />}
                //删除请求
                onClick={() => {
                  deleteHosListRequest(id)
                  setReRender(!reRender)
                  message.success('医院删除成功');
                }} />
            </Tooltip>
          </div>
        )
      }
    },
  ];

  //页码的函数逻辑
  const pageChangeHandle = (current: number, pageSize: number) => {
    setCurrent(current)
    setPageSize(pageSize)
  }

  //搜索获取表单的事件
  const searchHosFinishHandle = (fieldValue: searchHosFinishParamsType) => {
    //参数是手机当前表单的值 组成的对象
    setFieldValue(fieldValue)
  }

  //添加更新的编程式路由导航
  const addHosHandle = () => {
    //编程式路由导航跳转
    navigate("/syt/hospital/addhosset")
  }

  //批量删除的事件
  const batchRemoveHandle = async () => {
    //发送批量删除的请求
    await batchRemoveHosListRequest(batchIds)
    //请求完成后重新渲染视图
    setReRender(!reRender)
    //并将按钮禁用
    setIsSelector(true)
    message.success('批量删除成功')
  }

  return (
    <div className={style.outer} >
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout="inline"
          onFinish={searchHosFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder='医院名称' />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input placeholder='医院编号' />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} >
            <Button type="primary" htmlType="submit">
              <SearchOutlined />
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.buttons}>
          <Button type="primary" onClick={addHosHandle} >添加</Button>
          <Button type="primary" danger disabled={isSelector}
            //批量删除的逻辑
            onClick={batchRemoveHandle}
          >批量删除</Button>
        </div>
        <Table columns={columns}
          dataSource={hosSetList}
          scroll={{ x: 1500 }}
          rowKey='id'
          bordered
          loading={isLoading}
          //添加表格的多选框属性
          rowSelection={{
            onChange(ids: Key[]) {
              //通过监听id数组的长度转成布尔值改变批量删除按钮的状态
              setIsSelector(!ids.length)
              setBatchIds(ids)
            }
          }}
          //给表格的配置页码，通过对象配置
          pagination={{
            //当前页码
            current,
            //数据的数量
            total,
            //每页多少条
            pageSize,
            //展示更改每页条数的选项（默认total大于50条的时候开启）
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            showTotal(total) {
              return `共${total}条数据`
            },
            onChange: pageChangeHandle
          }}
        />
      </Card>
    </div>
  )
}
